<template>
      <div class="selector-container">
            <el-checkbox-group v-model="selectList">
                  <span :title="col.text"
                        v-for="(col,index) in columns"
                        :key="index">
                        <el-checkbox class="checkbox"
                              :label="col.prop"
                              :checked="!col.hide"
                              @change="(value)=>checkOnChange(value,col.prop)">{{col.text}}</el-checkbox>
                  </span>

            </el-checkbox-group>
      </div>
</template>

<script>
export default {
      props: {
            columns: {
                  type: Array,
                  default: () => []
            }
      },
      data() {
            return {
                  selectList: []
            }
      },
      methods: {
            change(value) {
                  this.$emit('change', value)
            },
            checkOnChange(value, prop) {
                  this.$emit('checkOnChange', value, prop)
            }
      }
}
</script>

<style lang="scss" scoped>
.selector-container {
      .checkbox {
            width: 160px;
            margin: 5px 10px;
            overflow: hidden;
            text-overflow: ellipsis;
      }
}
</style>